<template>
  <view class="container">
    <view class="header">
      <navbar title="司机" titleColor="white" :isShowIcon="false"></navbar>
      <!-- <text>司机</text> -->
    </view>
    <view class="body">
      <view class="item-box">
        <view class="item" @click="gotoDetail(item.id)" v-for="item in driverList" :key="item.id">
          <view class="item-left">
            <image src="/static/images/Rectangle715@2x.png" mode=""></image>
            <!-- <image :src="baseUrl + item.image || '/static/images/Rectangle715@2x.png'" mode=""></image> -->
            <view class="left-body">
              <text>{{item.nickname }}</text>
              <text class="placeholder"> {{item.remark}} </text>
            </view>

          </view>
          <view class="item-right">
            电话联系
          </view>
        </view>

      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        driverList: [],
        baseUrl: uni.gRequest.file,
      };
    },
    async onShow() {
      var user = await uni.gRequest.checkLogin();
      console.log(333, user);
      if (user.userId) {
        this.getDriverList()
      }
    },
    methods: {
      // 得到司机列表信息
      async getDriverList(targetUserId) {
        const res = await uni.gRequest.get(`/app/user/driverlist`, {
          userClass: 2
        })
        this.driverList = res.rows
      },
      gotoDetail(id) {
        uni.navigateTo({
          url: "/pages/driver_detail/driver_detail?targetUserId=" + id
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .container {
    height: 100%;
  }

  .header {
    height: 286rpx;
    background-color: #fd5d29;

    text {
      display: block;
      width: 750rpx;
      text-align: center;
      font-size: 36rpx;
      color: #FFFFFF;
    }
  }

  .body {
    background-color: white;
    padding: 0 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    margin-top: -40rpx;
  }

  .item-box {
    // padding: 0 20rpx;
    // box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    // border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx #eee solid;
    padding: 30rpx 0;
    font-size: 30rpx;
    color: #000000;

    &:last-child {
      border-bottom: none;
    }

    .item-left {
      display: flex;
      align-items: center;

      image {
        width: 100rpx;
        height: 100rpx;
      }

      .left-body {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .placeholder {
          margin-top: 14rpx;
          font-size: 20rpx;
          color: #666666;
        }
      }

    }

    .item-right {
      background: linear-gradient(270deg, #FE7B4E 0%, #FF4708 100%);
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      padding: 10rpx 18rpx;
      font-size: 24rpx;
      color: #FFFFFF;
      letter-spacing: 2rpx;
    }


  }
</style>
